<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MV界面</title>
    <link rel="stylesheet" href="./css/kgl.min.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2223764_kplv07w8n7f.css">
    <link rel="stylesheet" href="./css/kgl.css">
    <link rel="stylesheet" href="./css/MVfenqu.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>

<body>
    <div class="headerbox">
        <div class="header">

            <div class="header-left">
                <a href="./主页.html" style="width:153px;height: 37px;display: block;"> <img src="" alt=""></a>
            </div>
            <div class="header-content">
                <input class="headerinp" type="text" placeholder="张靓颖 如果爱下去">
                <i class="search_icon"></i>
            </div>

            <div class="header-right">
                <div class="header-right-kf">
                    <ul>
                        <li> <a href="">客服中心</a></li>
                        <li> <a href="">招贤纳士</a></li>
                        <li> <a href="">会员中心</a></li>
                        <li> <a href="">商务合作</a></li>

                    </ul>



                </div>
                <div class="header-right-dl"><a href="">登录</a> </div>
            </div>
        </div>
        <div class="navWrap">
            <div class="nav">
                <ul class="homeNav">
                    <li><a class="normal active" href="./主页.html">首页</a></li>
                    <li><a class="normal" href="./Kglist(榜单).html">榜单</a></li>
                    <li><a class="normal" id="productCenter" href="./下载客户端.html">下载客户端</a></li>
                    <li class="more" id="more"><a href="" class="icon icon-nav6" id="showMore">更&nbsp;多</a>
                        <i class="iconfont icon-shangjiantou"> </i>
                        <i class="iconfont icon-xiajiantou"></i>
                        <ul class="secondMenu" id="secondMenu">
                            <li><a href="./radioStation.html">电台</a></li>
                            <li><a href="./MV界面.html">MV</a></li>
                            <li><a href="./song-sheet.html">歌单</a></li>
                            <li><a href="./酷狗歌手排行.html">歌手</a></li>
                        </ul>
                    </li>
                </ul>
                <a href="" class="aaa"></a>
                <ul class="subNav">
                    <style>
                        .navWrap .subNav li {
                            margin-left: 15px;
                        }

                        .navWrap .subNav li.kgPlayer a {
                            background: url(https://webimg.kgimg.com/eadc2676a352ce14ec5f8050c8c42061.png) no-repeat left center;
                        }

                        .navWrap .subNav li.kgPlayer a:hover {
                            background-image: url(https://webimg.kgimg.com/316067c6630d7375bd5c6503662ae4c4.png);
                        }

                        .navWrap .subNav li.openPlat a {
                            background: url(https://webimg.kgimg.com/7366e06d43da71239d4f2ebd24b4e02e.png) no-repeat left center;
                        }

                        .navWrap .subNav li.openPlat a:hover {
                            background-image: url(https://webimg.kgimg.com/34891849f2a47e7ef62b5fe43b5c46ee.png);
                        }
                    </style>
                    <li><a target="_blank" href="http://fanxing.kugou.com/?action=spreadIndex&amp;id=3"
                            class="iconfont icon-star">直播</a></li>
                    <li><a target="_blank" href="https://www.kugou.com/shop/product/kugouproduct/index.html"
                            class="iconfont icon-icon-">商城</a></li>

                    <li><a target="_blank" href="https://www.kugou.com/imusic/" class="iconfont icon-V">音乐人</a></li>
                    <li class="kgPlayer">
                        <a target="_blank" href="https://sp.kugou.com/" class="icon">代理商</a>
                    </li>

                    <li>
                        <a target="_blank" href="http://www.kugou.com/fmugc-v2/dist/index.html"
                            class="iconfont icon-ktv">主播电台</a>
                    </li>
                    <li class="openPlat">
                        <a target="_blank" href="//open.kugou.com/" class="icon">开放平台</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>


    <div class="fram">
        <div class="framtitle">
            <div class="loop">

                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img
                                src="https://imgessl.kugou.com/commendpic/20210122/20210122141327474348.jpg" alt="">
                        </div>
                        <div class="swiper-slide"><img
                                src="https://imgessl.kugou.com/commendpic/20210122/20210122094659494010.jpg" alt="">
                        </div>
                        <div class="swiper-slide"><img
                                src="https://imgessl.kugou.com/commendpic/20210119/20210119150659906558.jpg" alt="">
                        </div>
                        <div class="swiper-slide"><img
                                src="https://imgessl.kugou.com/commendpic/20210115/20210115110646503390.jpg" alt="">
                        </div>
                        <div class="swiper-slide"><img
                                src="https://imgessl.kugou.com/commendpic/20210115/20210115101836353035.jpg" alt="">
                        </div>
                        <div class="swiper-slide"><img
                                src="https://imgessl.kugou.com/commendpic/20210114/20210114171008318416.jpg" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                </div>
                <div class="right">
                    <h3><span>MV热播总排行榜</span>
                        <a href="">更多</a>
                    </h3>
                    <ul class="ulMV">
                        <!-- <li><span class="num">1</span>
            <a href="">Al木木林 - 大籽《白月光与朱砂痣》【有翡】王一博混剪，他是你的白月光还是朱砂痣</a>

            <i class="bofang"></i>
        </li> -->
                    </ul>
                </div>
            </div>

        </div>
        <div class="conMV">


            <div class="radiowrap">
                <div class="leftCon">
                    <h3>MV分类</h3>
                    <ul>
                        <li>新歌推荐</li>
                        <li>华语精选</li>
                        <li>日语精选</li>
                        <li>欧美精选</li>
                    </ul>
                </div>
                <div class="rightCon">
                    <h3>新歌（推荐2000个）</h3>
                    <div class="MVlist">
                        <ul class="MVlistul">
                            <li class="MVlistli">
                                <img src="" alt=""><em></em>
                                <i></i>
                                <p></p>
                            </li>
                        </ul>
                    </div>
                    <div class="page">
                        <a class="current" href="">1</a>
                        <a href="">2</a>
                        <a href="">3</a>
                        <a href="">4</a>
                        <a  href="">5</a>...<a href="">100</a>
                            <a href="">下一页</a>
                        
                        </div>
                </div>
            </div>


        </div>
    </div>



    <div id="footer">
        <div class="footer">
            <div class="links">
                <a hidefocus="true" href="http://www.kugou.com/about/aboutus.html" target="_blank">关于酷狗</a>| <a
                    hidefocus="true" href="javascript:void(0);" id="report">监督举报</a> | <a hidefocus="true"
                    href="https://www.kugou.com/about/business.html" target="_blank">商务合作</a> | <a hidefocus="true"
                    href="http://www.kugou.com/about/adservice.html" target="_blank">广告服务</a> | <a hidefocus="true"
                    target="_blank" href="http://www.kugou.com/about/copyRightGuide.html">投诉指引</a> | <a target="_blank"
                    href="http://www.kugou.com/about/privacy.html ">隐私政策</a> | <a target="_blank"
                    href="http://www.kugou.com/about/children.html ">儿童隐私政策</a> | <a hidefocus="true" target="_blank"
                    href="http://www.kugou.com/about/protocol.html">用户服务协议</a> | <a hidefocus="true" target="_blank"
                    href="http://www.kugou.com/imusic/">酷狗音乐人</a> | <a hidefocus="true" target="_blank"
                    href="https://ztc.kugou.com">酷狗直通车</a> | <a hidefocus="true"
                    href="https://www.kugou.com/hr/kugouHr/dist/index.html" target="_blank">招聘信息</a> | <a
                    hidefocus="true" href="https://www.kugou.com/shop/help/serviceCenter" target="_blank">客服中心</a> | <a
                    hidefocus="true"
                    href="http://survey.kugou.com/default/index/i=40CD7B8437008E65E67D82D9044C15C99C2E699859F51338"
                    target="_blank">用户体验提升计划</a>
            </div>
            <div class="copyright">
                <p style="-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text; user-select:text">
                    我们致力于推动网络正版音乐发展，相关版权合作请联系copyrights@kugou.com</p>
                <p>信息网络传播视听节目许可证 1910564 增值电信业务经营许可证粤B2-20060339 &nbsp;&nbsp;&nbsp;<a hidefocus="true" target="_blank"
                        href="http://beian.miit.gov.cn">粤ICP备09017694号</a><span class="footerIcon"><a target="_blank"
                            href="http://sq.ccm.gov.cn:80/ccnt/sczr/service/business/emark/toDetail/E64D2439A71544C7B995FC0A53D8F965">&nbsp;&nbsp;&nbsp;&nbsp;</a></span>
                </p>
                <p>广播电视节目制作经营许可证（粤）字第01270号&nbsp;&nbsp;&nbsp;&nbsp;营业性演出许可证穗天演440106026&nbsp;&nbsp;&nbsp;<a
                        hidefocus="true" target="_blank" href="https://www.kugou.com/common/images/license.jpg">营业执照</a>
                </p>
                <p>穗公网监备案证第44010650010167&nbsp;&nbsp;&nbsp;&nbsp;互联网药品信息服务资格证编号（粤）-非经营性-2012-0018<a target="_blank"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010602000141">&nbsp;&nbsp;&nbsp;<span>粤公网安备
                            44010602000141号</span><img style="vertical-align: text-bottom;" }=""
                            src="https://www.kugou.com/common/images/icon_yuewangga1.png" width="16" height="16"></a>
                </p>
                <p style="-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text; user-select:text"><a
                        hidefocus="true"  target="_blank"
                        href="https://www.12377.cn">互联网不良信息举报中心：www.12377.cn</a>&nbsp;&nbsp;&nbsp;&nbsp;酷狗不良信息举报邮箱：jubao_music@kugou.net&nbsp;&nbsp;&nbsp;&nbsp;客服邮箱：kefu@kugou.net
                </p>
                <p>Copyright&nbsp;&nbsp;©&nbsp;&nbsp;2004-2021 KuGou-Inc.All Rights Reserved
                </p>
            </div>
        </div>

    </div>
</body>
<script src="./js/title.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
<script>
    var ulMV = document.querySelector('.ulMV');
    var num = ulMV.querySelector('.num');
    var data = [{

        "num": "1",
        "title": "Al木木林 - 大籽《白月光与朱砂痣》【有翡】王一博混剪，他是你的白月光还是朱砂痣",
        "href": "https://www.kugou.com/mvweb/html/mv_3706368.html"
    }, {
        "num": "2",
        "title": "程响 - 四季予你",
        "href": "https://www.kugou.com/mvweb/html/mv_3723092.html"
    }, {
        "num": "3",
        "title": "微    光，，，， - 2020年最后一天，东伯雪鹰回来了，《踏山河》",
        "href": "https://www.kugou.com/mvweb/html/mv_3692891.html"
    }, {
        "num": "4",
        "title": "小蜜蜂 - 黄霄雲《星辰大海》我向你奔赴而来  你就是星辰大海",
        "href": "https://www.kugou.com/mvweb/html/mv_3770358.html"
    }, {
        "num": "5",
        "title": "音乐巅峰 - 火遍全网的《踏山河》万里山河都踏过，天下又入谁手",
        "href": "https://www.kugou.com/mvweb/html/mv_3729934.html"
    }, {
        "num": "6",
        "title": "热歌速递 - 霸屏神曲《醒不来的梦》配上小姐姐神仙颜值简直就是视觉盛宴！",
        "href": "https://www.kugou.com/mvweb/html/mv_3667469.html"
    }, {
        "num": "7",
        "title": "南方姑娘 - 《白月光与朱砂痣》白月光是得不到的美好，朱砂痣是没能珍惜的痛",
        "href": "https://www.kugou.com/mvweb/html/mv_3712733.html"
    }, {
        "num": "8",
        "title": "音速V视 - 杨小壮《烟雨成思》拿起笔想画出一个你",
        "href": "https://www.kugou.com/mvweb/html/mv_3709115.html"
    }, {
        "num": "9",
        "title": "任然 - 飞鸟和蝉",
        "href": "https://www.kugou.com/mvweb/html/mv_3713642.html"
    }, {
        "num": "10",
        "title": "小柒音乐 - 《白月光与朱砂痣》舞蹈，这小姐姐的舞姿，也太好看了吧",
        "href": "https://www.kugou.com/mvweb/html/mv_3762892.html"
    }];
    var str = '';
    for (var i = 0; i < data.length; i++) {
        str += `
<li><span class="num">${data[i].num}</span>
                    <a href="${data[i].href}">${data[i].title}</a>
                    
                <i class="bofang"></i>
                    </li>
`
    }
    ulMV.innerHTML = str;


    var data1 = [{
        "title": "多亮 - 剑震江湖",
        "imgurl": "https://p3fx.kgimg.com/mvpic/e4/52/e452cec897f538c33175898ad2defee9.jpg"

    }, {
        "title": "江映蓉 - 依然",
        "imgurl": "https://p3fx.kgimg.com/mvpic/f8/32/f832fa2620302e56c3b5b1eaf7c36465.jpg"
    }, {
        "title": "Sunnee杨芸晴 - 乘风破浪",
        "imgurl": "https://p3fx.kgimg.com/mvpic/27/9b/279bb84ef43c4fdd4efa5130da9b87c8.jpg"
    }, {
        "title": "周深 - 归处",
        "imgurl": "https://p3fx.kgimg.com/mvpic/c8/e1/c8e1a89390563d657bd1517c4a28045c.jpg"
    }, {
        "title": "Billie Eilish、ROSALÍA - Lo Vas A Olvidar",
        "imgurl": "https://p3fx.kgimg.com/mvpic/9b/94/9b94490b6b552caeedd7d223dc1f5eb3.jpg"
    }, {
        "title": "By2 - 大红包",
        "imgurl": "https://p3fx.kgimg.com/mvpic/77/38/77385df8c26694b00b05a0a8de4f1658.jpg"
    }, {
        "title": "萨顶顶 - 海底",
        "imgurl": "https://p3fx.kgimg.com/mvpic/36/df/36dfa43b933977a156c339952a19d18a.jpg"
    }, {
        "title": "Ty.、AnsrJ、Dj Chronic - 新西部爱情",
        "imgurl": "https://p3fx.kgimg.com/mvpic/f7/f6/f7f6f90378a37c99e1ae4276c0aa1ae6.jpg"
    }, {
        "title": "刘若英 - 黄金年代",
        "imgurl": "https://p3fx.kgimg.com/mvpic/04/b8/04b8842e992ac3e0238d6288ea9c02c1.jpg"

    }, {
        "title": "张杰 - 像一道光",
        "imgurl": "https://p3fx.kgimg.com/mvpic/f0/a1/f0a1d2bc4cf81e7a5d43b1db1c031d65.jpg"
    }, {
        "title": "吴琼 - 醉清欢",
        "imgurl": "https://p3fx.kgimg.com/mvpic/e6/98/e698f5c8bd302ad40df62db0f7bada40.jpg"
    }, {
        "title": "毛阿敏 - 迷雾之光",
        "imgurl": "https://p3fx.kgimg.com/mvpic/32/30/32307504ac798648bfeab2fec4f4a7d7.jpg"

    }, {
        "title": "胡夏 - 无人知晓的梦",
        "imgurl": "https://p3fx.kgimg.com/mvpic/9f/88/9f88ed98b70c5672278d354dcf2369ff.jpg"

    }, {
        "title": "赵慧仙(선재) - I’m Missing You",

        "imgurl": "https://p3fx.kgimg.com/mvpic/f3/65/f3656fed44abafb029756069e1382710.jpg"

    }, {
        "title": "邓典果DDG、Sway X - Shake",
        "imgurl": "https://p3fx.kgimg.com/mvpic/22/b1/22b163165d8d56fc32b4f5e7ef9f83c6.jpg"

    }, {
        "title": "请夏 - X",
        "imgurl": "https://p3fx.kgimg.com/mvpic/74/50/7450435eb9422e5e310ab6458cfa2027.jpg"
    }, {
        "title": "满舒克 - LOOK FOR ME",
        "imgurl": "https://p3fx.kgimg.com/mvpic/b6/68/b668bbd3e0297c3ceab669e947b2ad53.jpg"
    }, {
        "title": "AKA宝藏潮牛、侯志斌、宋文洋、飞鸟 - 恭喜恭喜",
        "imgurl": "https://p3fx.kgimg.com/mvpic/f1/3b/f13b3be997df7d886a98a31a67bfb7ba.jpg"
    }, {
        "title": "告五人 - 唯一",
        "imgurl": "https://p3fx.kgimg.com/mvpic/db/d4/dbd47c443f6d34a062488e19cbc6b68b.jpg"
    }, {
        "title": "白安 - 白色",
        "imgurl": "https://p3fx.kgimg.com/mvpic/80/5d/805d8eafe872fa45a6235b853f41171a.jpg"

    }]

    var MVlistul = document.querySelector('.MVlistul');
    var str1 = '';
    for (var i = 0; i < data1.length; i++) {
        str1 += `
        <li class="MVlistli">
                            <img src="${data1[i].imgurl}" alt="">
                            <em></em>
                            <i></i>
                            <p>${data1[i].title}</p>
                        </li>
`
    }
    MVlistul.innerHTML = str1;
</script>

</html>